<template>
  <div class="page-classroom">
    <div class="page-user-container">
      <div class="classroom-left">
        <div class="left-title">{{kl_md.KLCGBG == 1 ? "我的微科研" : "我的教室"}}</div>
        <div :class="['left-item',tap === 'ongoing'?'active':'']" @click="handleSelect('ongoing')">正在进行</div>
        <div :class="['left-item',tap === 'mycourse'?'active':'']" @click="handleSelect('mycourse')">我的课程</div>
<!--        <div :class="['left-item',tap === 'myquestion'?'active':'']" @click="handleSelect('myquestion')" v-if="kl_md.KLXBTK == 1">我的题库</div>
        <div :class="['left-item',tap === 'mytest'?'active':'']" @click="handleSelect('mytest')" v-if="kl_md.KLXBTK == 1">我的考试</div>
        <div :class="['left-item',tap === 'mycollection'?'active':'']" @click="handleSelect('mycollection')">我的收藏</div>
        <div :class="['left-item',tap === 'myachievements'?'active':'']" @click="handleSelect('myachievements')" v-if="kl_md.KLCGBG == 1">成果报告</div>
        <div :class="['left-item',tap === 'mytask'?'active':'']" @click="handleSelect('mytask')" v-if="kl_md.KLZYGL == 1">我的作业</div>
        <div :class="['left-item',tap === 'mycertificate'?'active':'']" @click="handleSelect('mycertificate')" v-if="kl_md.KLZSCL == 1">我的证书</div> -->
      </div>
      <div class="classroom-right">
        <div class="ongoing" v-if="tap === 'ongoing' && false">
          <p class="title">进行中的课程</p>
          <div class="online"></div>
          <div class="course-box" v-for="(item, index) in underway_course_list" :key="index">
            <div class="tabs-list">
              <Tag checkable color="primary" v-if="!item.isFree && !item.isDiscount && isMemberFree(item.majorId,item.id) ">会员免费</Tag>
              <Tag checkable color="default" v-if="item.deleted === 1 ">会员已过期</Tag>
            </div>
            <div class="box-left">
              <img v-lazy="item.iconPath" :key="item.iconPath"/>
            </div>
            <div class="box-right">
              <div class="course-name">{{ item.courseName }}</div>
              <div class="course-teacher">{{ item.acName }}《{{ item.majorName }}》</div>
              <div class="course-time">课程时间：{{ trimDate(item.buyCourseStartDate) }} 至 {{ trimDate(item.buyCourseDeadlineDate) }}</div>
              <div class="course-progress" v-if="item.schedule != 1"><Progress :percent="item.schedule * 100" status="active" /></div>
              <div class="course-progress" v-if="item.schedule == 1">
                <Progress :percent="100" stroke-color="#ff8a8a">
                  <Icon type="checkmark-circled"></Icon>
                  <span style="color:#000000">完成</span>
                </Progress>
              </div>
              <div class="course-tips">
                <div class="study" v-if="item.schedule == 1">已学习完</div>
                <!-- <div class="live">直播中</div> -->
              </div>
              <div class="submit">
                <div class="start-study" v-if="item.deleted === 1" @click="toPath('/coursedetail?id=' + item.id)">购买课程</div>
                <div class="start-study" v-if="item.deleted === 0 && item.schedule == 0" @click="toPath('/coursedetail?id=' + item.id)">开始上课</div>
                <div class="start-study" v-if="item.deleted === 0 && item.schedule > 0" @click="toPath('/coursedetail?id=' + item.id)">继续上课</div>
                <div class="start-study" style="background-color: #ff8a8a;" v-if="item.deleted === 0 && item.schedule == 1" @click="toPath('/coursedetail?id=' + item.id)">重新学习</div>
              </div>
            </div>
          </div>
          <div>
            <Page v-if="underway_course_list.length > 0" style="text-align:center;margin-bottom:12px;" :total="underway_course_list.length" :current="course.page" :page-size="course.pageSize" @on-change="n => handleChangePage(n, 'course')"></Page>
          </div>
          <div class="no-data" v-if="course_record_list.length == 0">
            <Icon type="ios-information-circle" />
            <div class="none-text">
              暂无课程哦~
            </div>
          </div>
        </div>
        <div class="mycourse" v-if="tap === 'mycourse' && false">
          <p class="title">我的课程({{ course_record_list.length }}个)</p>
          <div class="online"></div>
          <div class="course-box" v-for="(item, index) in course_list" :key="index">
            <div class="tabs-list">
              <Tag checkable color="primary" v-if="!item.isFree && !item.isDiscount && isMemberFree(item.majorId,item.id) ">会员免费</Tag>
              <Tag checkable color="default" v-if="item.deleted === 1 ">会员已过期</Tag>
            </div>
            <div class="box-left">
              <img v-lazy="item.iconPath" :key="item.iconPath"/>
            </div>
            <div class="box-right">
              <div class="course-name">{{ item.courseName }}</div>
              <div class="course-teacher">{{ item.acName }}《{{ item.majorName }}》</div>
              <div class="course-time">课程时间：{{ trimDate(item.buyCourseStartDate) }} 至 {{ trimDate(item.buyCourseDeadlineDate) }}</div>
              <div class="course-progress" v-if="item.schedule != 1"><Progress :percent="parseInt(item.schedule * 100)" status="active" /></div>
              <div class="course-progress" v-if="item.schedule == 1">
                <Progress :percent="100" stroke-color="#ff8a8a">
                  <Icon type="checkmark-circled"></Icon>
                  <span style="color:#000000">完成</span>
                </Progress>
              </div>
              <div class="course-tips">
                <div class="study" v-if="item.schedule == 1">已学习完</div>
                <!-- <div class="live">直播中</div> -->
              </div>
              <div class="submit">
                <div class="start-study" v-if="item.deleted === 1" @click="toPath('/coursedetail?id=' + item.id)">购买课程</div>
                <div class="start-study" v-if="item.deleted === 0 && item.schedule == 0" @click="toPath('/coursedetail?id=' + item.id)">开始上课</div>
                <div class="start-study" v-if="item.deleted === 0 && item.schedule > 0 && item.schedule < 1" @click="toPath('/coursedetail?id=' + item.id)">继续上课</div>
                <div class="start-study" style="background-color: #ff8a8a;" v-if="item.deleted === 0 && item.schedule == 1" @click="toPath('/coursedetail?id=' + item.id)">重新学习</div>
              </div>
            </div>
          </div>
          <div>
            <Page v-if="course_record_list.length > 0" style="text-align:center;margin-bottom:12px;" :total="course_record_list.length" :current="course.page" :page-size="course.pageSize" @on-change="n => handleChangePage(n, 'course')"></Page>
          </div>
          <div class="no-data" v-if="course_record_list.length == 0">
            <Icon type="ios-information-circle" />
            <div class="none-text">
              暂无课程哦~
            </div>
          </div>
        </div>
        <div class="ongoing_module" v-if="tap === 'ongoing'">
          <div class="mycourse_header">
            <div class="header_title">进行中的课程</div>
          </div>
          <ul class="mycourse_list">
            <li class="mycourse_item" v-for="(item, index) in underway_course" :key="index">
              <div class="tabs_list">
                <Tag checkable color="primary" v-if="!item.isFree && !item.isDiscount && isMemberFree(item.majorId,item.id) ">会员免费</Tag>
                <Tag checkable color="default" v-if="item.deleted === 1 ">会员已过期</Tag>
              </div>
              <div class="mycourse_item_left">
                <img v-lazy="item.iconPath" :key="item.iconPath"/>
              </div>
              <div class="mycourse_item_center">
                <h3 class="mycourse_name">{{ item.courseName }}</h3>
                <p class="mycourse_info">{{ item.acName }}《{{ item.majorName }}》</p>
                <p class="mycourse_info">课程时间：{{ trimDate(item.buyCourseStartDate) }} 至 {{ trimDate(item.buyCourseDeadlineDate) }}</p>
                <div class="mycourse_progress" v-if="item.schedule != 1"><Progress :percent="item.schedule ? parseInt(item.schedule * 100) : 0" status="active" /></div>
                <div class="mycourse_progress" v-if="item.schedule == 1">
                  <Progress :percent="100" stroke-color="#ff8a8a">
                    <Icon type="checkmark-circled"></Icon>
                    <span style="color:#000000">完成</span>
                  </Progress>
                </div>
              </div>
              <div class="mycourse_item_right">
                <div class="mycourse_btn" v-if="item.deleted === 1" @click="toPath('/coursedetail?id=' + item.id)">购买课程</div>
                <div class="mycourse_btn" v-if="item.deleted === 0 && item.schedule == 0" @click="toPath('/play?id=' + item.id)">开始上课</div>
                <div class="mycourse_btn" v-if="item.deleted === 0 && item.schedule > 0 && item.schedule < 1" @click="toPath('/play?id=' + item.id)">继续上课</div>
                <div class="mycourse_btn" style="background-color: #ff8a8a;" v-if="item.deleted === 0 && item.schedule == 1" @click="toPath('/play?id=' + item.id)">重新学习</div>
              </div>
            </li>
          </ul>
          <div class="empty_data" v-if="underway_course_list.length == 0">
            <Icon type="ios-paper" size="60" />
            <p>暂无数据</p>
          </div>
          <Page v-if="underway_course_list.length > 0" style="text-align:center;margin-bottom:12px;" :total="underway_course_list.length" :current="underway_course_pages.page" :page-size="underway_course_pages.pageSize" @on-change="n => handleChangePage(n, 'underway_course_pages')"></Page>
        </div>
        <div class="mycourse_module" v-if="tap === 'mycourse'">
          <div class="mycourse_header">
            <div class="header_title">我的课程</div>
          </div>
          <ul class="mycourse_list">
            <li class="mycourse_item" v-for="(item, index) in course_list" :key="index">
              <div class="tabs_list">
                <Tag checkable color="primary" v-if="!item.isFree && !item.isDiscount && isMemberFree(item.majorId,item.id) ">会员免费</Tag>
                <Tag checkable color="default" v-if="item.deleted === 1 ">会员已过期</Tag>
              </div>
              <div class="mycourse_item_left">
                <img v-lazy="item.iconPath" :key="item.iconPath"/>
              </div>
              <div class="mycourse_item_center">
                <h3 class="mycourse_name">{{ item.courseName }}</h3>
                <p class="mycourse_info">{{ item.acName }}《{{ item.majorName }}》</p>
                <p class="mycourse_info">课程时间：{{ trimDate(item.buyCourseStartDate) }} 至 {{ trimDate(item.buyCourseDeadlineDate) }}</p>
                <div class="mycourse_progress" v-if="item.schedule != 1"><Progress :percent="item.schedule ? parseInt(item.schedule * 100) : 0" status="active" /></div>
                <div class="mycourse_progress" v-if="item.schedule == 1">
                  <Progress :percent="100" stroke-color="#ff8a8a">
                    <Icon type="checkmark-circled"></Icon>
                    <span style="color:#000000">完成</span>
                  </Progress>
                </div>
              </div>
              <div class="mycourse_item_right">
                <div class="mycourse_btn" v-if="item.isComment != 1 && kl_md.KLKCPJ == 1" @click="toPath('/comment?id=' + item.id)">评价课程</div>
                <div class="mycourse_btn" v-if="item.deleted === 1" @click="toPath('/coursedetail?id=' + item.id)">购买课程</div>
                <div class="mycourse_btn" v-if="item.deleted === 0 && item.schedule == 0" @click="toPath('/play?id=' + item.id)">开始上课</div>
                <div class="mycourse_btn" v-if="item.deleted === 0 && item.schedule > 0 && item.schedule < 1" @click="toPath('/play?id=' + item.id)">继续上课</div>
                <div class="mycourse_btn" style="background-color: #ff8a8a;" v-if="item.deleted === 0 && item.schedule == 1" @click="toPath('/play?id=' + item.id)">重新学习</div>
              </div>
            </li>
          </ul>
          <div class="empty_data" v-if="course_record_list.length == 0">
            <Icon type="ios-paper" size="60" />
            <p>暂无数据</p>
          </div>
          <Page v-if="course_record_list.length > 0" style="text-align:center;margin-bottom:12px;" :total="course_record_list.length" :current="course.page" :page-size="course.pageSize" @on-change="n => handleChangePage(n, 'course')"></Page>
        </div>
        <div class="myachievements" v-if="tap === 'myachievements'">
          <div class="report-box" v-for="(item,index) in examineReportList" :key="index">
            <div class="report-top">
              <div class="report-top-left">
                <img class="course-img" :src="item.courseIcon" alt="">
                <div class="course-name">{{item.reportName}}</div>
              </div>
              <div class="report-top-right">
                <span class="record" @click="examineReportHandle(item)">审核流程</span>
                <Upload action="#" :before-upload="handleUploadExport" :show-upload-list="false">
                  <Button type="primary" icon="md-cloud-upload" @click="setReport(item)" :disabled="!!item.userReport">{{item.userReport ? "已经上传":"上传作业"}}</Button>
                </Upload>
              </div>
              <div class="tips" v-if="item.userReport">
                  <span class="bg-color" :style="{backgroundColor: item.userReport.state == 3 ? 'rgb(147, 224, 109)' : item.userReport.state == 2 ? 'rgb(255, 0, 0)' :'#5f6366'}"></span>
                  {{item.userReport.state | formatState}}
              </div>
            </div>
            <div class="report-bottom">
              <div class="report-link"><Icon type="md-attach" />附件模板：{{item.reportName + '.' + item.teamplateUrl.replace(/(.*\.)/, '')}}</div>
              <Button type="primary" icon="md-arrow-down" @click="downloadExport(item.teamplateUrl,item.reportName)">下载</Button>
            </div>
          </div>
          <div class="report-empty-box" v-if="examineReportList.length == 0">
            <Icon type="ios-alert-outline" size="70" />
            <p>暂无课程作业哟 !</p>
          </div>
        </div>
        <div class="mycertificate" v-if="tap === 'mycertificate'">
          <div class="certificate-box" v-for="(item,index) in certificateList" :key="index">
              <div class="certificate-box-item" style="width:20%;">
                姓名：{{ item.name }}
              </div>
              <div class="certificate-box-item" style="width:30%;">
                证书编号：{{ item.certificateNo }}
              </div>
              <div class="certificate-box-item" style="width:30%;">
                证书类型：{{ item.certificateTypeName }}
              </div>
              <div class="certificate-box-item" style="width:20%;">
                <span class="certificate-btn" @click="previewFile(item.url,item.certificateNo)">预览</span>
                <span class="certificate-btn" style="margin-left:20px;" @click="downloadExport(item.url,item.certificateNo)">下载</span>
              </div>
          </div>
          <div class="certificate-empty-box" v-if="certificateList.length == 0">
            <Icon type="ios-alert-outline" size="70" />
            <p>尚未获得证书哟 !</p>
          </div>
        </div>
        <div class="mytask_module" v-if="tap === 'mytask'">
          <div class="task_header">
            <div class="header_title">我的作业</div>
          </div>
          <div class="task_module_box" v-for="(item,index) in myTaskList" :key="index">
            <div class="task_box_content">
              <p class="task_name"><span style="color: #707780;">课程作业{{ index + 1 }}-</span> 《<span style="color: #43474c;">{{item.videoName}}</span>》 <span style="color: var(--theme-color);">{{item.taskName}}</span></p>
              <p class="task_time">有效时间：{{item.startTime}} 至 {{item.endTime}}</p>
              <div class="task_btn_list">
                <div class="task_btn_item" v-if="item.resourceUrl" @click="downloadExport(item.resourceUrl,item.taskName)">下载资源</div>
                <div class="task_btn_item" v-if="item.userTask" @click="examineTaskHandle(item)">审批流程</div>
                <Upload action="#" :before-upload="handleUploadTask" :show-upload-list="false" v-if="item.taskType == 2">
                  <div :class="['task_btn_item', item.userTask ? 'task_btn_gray':'task_btn_pink']" @click="setTask(item,!!item.userTask,$event)">{{item.userTask ? "已经上传":"上传作业"}}</div>
                </Upload>
                <div v-else :class="['task_btn_item', item.userTask ? 'task_btn_gray':'task_btn_pink']" @click="setTask(item,!!item.userTask,$event)">{{item.userTask ? "考试完成":"开始考试"}}</div>
              </div>
              <div class="examine_tips" v-if="item.userTask && item.userTask.state == 0">正在审批中...</div>
            </div>
          </div>
          <div class="empty_data" v-if="myTaskList.length == 0">
            <Icon type="ios-paper" size="60" />
            <p>暂无数据</p>
          </div>
        </div>
        <div class="mytest_module" v-if="tap === 'mytest' && kl_md.KLXBTK == 1">
          <div class="test_header">
            <div class="header_title">我的考试</div>
          </div>
          <div class="test_box" v-for="(item, index) in record_list" :key="'record_list' + item.id" @click="testRecordHandle(item)">
            <div class="test_box_left">考试题</div>
            <div class="test_box_right">
              <div class="test_name">{{ item.paperName || "未知" }}</div>
              <div class="test_time">
                <span>考试时间：{{ trimDate(item.createTime) }}</span>
                <span>考试用时：{{ item.useTime }}分钟</span>
                <span>考试得分：{{ item.score }}分</span>
              </div>
            </div>
            <div class="test_tips_result" v-if="item.score >= item.passScore">
              <span>及格</span>
            </div>
            <div
              class="test_tips_result"
              style="background: #f99797;"
              v-if="item.score < item.passScore"
            >
              <span>不及格</span>
            </div>
          </div>
          <div class="empty_data" v-if="test_record.total == 0">
            <Icon type="ios-paper" size="60" />
            <p>暂无数据</p>
          </div>
          <Page
              v-if="test_record.total > 0"
              style="text-align:center;margin-bottom:12px;"
              :total="test_record.total"
              :current="test_record.page"
              :page-size="test_record.pageSize"
              @on-change="n => mytestChangePage(n)"
            ></Page>
        </div>
        <div class="mycollection_module" v-if="tap === 'mycollection'">
          <div class="collection_header">
            <div class="collection_nav">
              <div :class="['collection_nav_item',collection_active == 'course' ? 'selectd' : '']" @click="collection_active = 'course'">课程收藏</div>
              <div :class="['collection_nav_item',collection_active == 'question' ? 'selectd' : '']" @click="collection_active = 'question'" v-if="kl_md.KLXBTK == 1">题库收藏</div>
            </div>
          </div>
          <ul class="course_collection_list" v-if="collection_active == 'course' && course_collection_pages.total > 0">
            <li class="course_collection_item" v-for="(item,index) in course_collection" :key="item.id">
              <div class="course_item_left">
                <img :src="item.course && item.course.iconPath" alt="">
              </div>
              <div class="course_item_center">
                <h3 class="course_name">{{ item.course && item.course.courseName }}</h3>
                <p class="course_time" v-if="item.course">课程时间：{{ trimDate(item.course.buyCourseStartDate) }} 至 {{ trimDate(item.course.buyCourseDeadlineDate) }}</p>
              </div>
              <div class="course_item_right">
                <div class="collection_btn" @click="toPath('/coursedetail?id=' + item.course.id)">查看</div>
              </div>
            </li>
          </ul>
          <ul class="question_collection_list" v-if="collection_active == 'question' && question_collection_pages.total > 0">
            <li class="question_collection_item" v-for="(item,index) in question_collection" :key="item.id">
              <div class="question_item_left">
                <img src="/img/mobile/question_menus_subject_new.png" alt="">
              </div>
              <div class="question_item_center">
                <h3 class="question_name">{{ item.question.question }}</h3>
                <p class="question_chapter">来源：章节练习-《{{ item.chapterName }}》</p>
              </div>
              <div class="question_item_right">
                <div class="collection_btn" @click="toPath('/question-test?id=' + item.questionGroupId + '&type=0&chapterId=' + item.chapterId +'&targetId=' + item.targetId)">查看</div>
              </div>
            </li>
          </ul>
          <div class="empty_data" v-if="(collection_active == 'course' && course_collection_pages.total == 0) || (collection_active == 'question' && question_collection_pages.total == 0)">
            <Icon type="ios-paper" size="60" />
            <p>暂无数据</p>
          </div>
          <Page
            v-if="collection_active == 'course' && course_collection_pages.total > 0"
            style="text-align:center;margin:12px 0;"
            :total="course_collection_pages.total"
            :current="course_collection_pages.page"
            :page-size="course_collection_pages.pageSize"
            @on-change="n => collectionChangePage(n,'course')"
          ></Page>
          <Page
            v-if="collection_active == 'question' && question_collection_pages.total > 0"
            style="text-align:center;margin:12px 0;"
            :total="question_collection_pages.total"
            :current="question_collection_pages.page"
            :page-size="question_collection_pages.pageSize"
            @on-change="n => collectionChangePage(n,'question')"
          ></Page>
        </div>
        <div class="myquestion" v-if="tap === 'myquestion' && kl_md.KLXBTK == 1">
          <div class="question_container" v-if="!questionId">
            <div class="question_header">
              <div class="question_nav">
                <div class="question_nav_item selectd">已购买题库</div>
                <!-- <div class="question_nav_item">我的题库</div> -->
              </div>
            </div>
            <div class="question_list">
              <div class="question_item" v-for="(item,index) in my_question_list" :key="index">
                <question-card :item="item" ></question-card>
              </div>
              <Page
                v-if="myquestion.total > 0"
                style="text-align:center;margin-bottom:12px;"
                :total="myquestion.total"
                :current="myquestion.page"
                :page-size="myquestion.pageSize"
                @on-change="n=>myquestionChangePage(n)"
              ></Page>
            </div>
          </div>
          <div class="question_detail" v-if="questionId && !questionMenu">
            <div class="question_header">
              <div class="question_nav">
                <div class="question_nav_item" @click="$router.push('/classroom?action=myquestion')">已购买题库</div>
                <Icon type="ios-arrow-forward" style="line-height: 74px;padding: 0 10px;" size="24"/>
                <div class="question_nav_item selectd">题库内页</div>
              </div>
            </div>
            <div class="question_info_box">
              <h4 class="question_info_name">{{currentQuestionDetail.questionGroupName}}</h4>
              <p class="question_info_date">适用限期：{{trimDate(currentQuestionDetail.startTime)}} 至 {{trimDate(currentQuestionDetail.endTime)}}</p>
              <div class="question_info_progress">
                <div class="info_progress_left">
                  <div class="progress">
                    <span>进&emsp;度</span
                    ><Progress
                      style="width:280px;margin:0 20px;"
                      :percent="currentQuestionDetail.rate_learning"
                      :stroke-width="16"
                      text-inside
                    />
                    <span>已完成：<span style="color:var(--theme-color);">{{currentQuestionDetail.doneNum}}</span> / {{currentQuestionDetail.questionNum}}</span>
                  </div>
                  <div class="correct">
                    <span>正确率</span
                    ><Progress
                      style="width:280px;margin:0 20px;"
                      :percent="currentQuestionDetail.accuracy"
                      :stroke-width="16"
                      text-inside
                    />
                    <span>正确率：{{currentQuestionDetail.accuracy}}%</span>
                  </div>
                </div>
                <div class="info_progress_right">
                  <div class="to_test_btn" v-if="currentQuestionDetail.rate_learning == 100" @click="toQuestionTest(currentQuestionDetail.firstChapterId)">重新答题</div>
                  <div class="to_test_btn" v-else-if="currentQuestionDetail.lastChapterId" @click="toQuestionTest(currentQuestionDetail.lastChapterId)">继续答题</div>
                  <div class="to_test_btn" v-else @click="toQuestionTest(currentQuestionDetail.firstChapterId)">立即答题</div>
                </div>
              </div>
            </div>
            <div class="question_menu_list">
              <div class="question_menu_item" @click="questionMenuHandle(1,1)">
                <div class="menu_left">
                  <img src="/img/mobile/question_chapter.png" alt="" />
                </div>
                <div class="menu_right">
                  <h4>章节练习</h4>
                  <p>多练习学得快学得好</p>
                </div>
              </div>
              <div class="question_menu_item" @click="questionMenuHandle(2,1)">
                <div class="menu_left">
                  <img src="/img/mobile/question_special.png" alt="" />
                </div>
                <div class="menu_right">
                  <h4>专项训练</h4>
                  <p>多练习学得快学得好</p>
                </div>
              </div>
              <div class="question_menu_item" @click="questionMenuHandle(3,1)">
                <div class="menu_left">
                  <img src="/img/mobile/question_simulation.png" alt="" />
                </div>
                <div class="menu_right">
                  <h4>模拟考试</h4>
                  <p>多练习学得快学得好</p>
                </div>
              </div>
              <div class="question_menu_item" @click="questionMenuHandle(4,1)">
                <div class="menu_left">
                  <img src="/img/mobile/question_wrong.png" alt="" />
                </div>
                <div class="menu_right">
                  <h4>我的错题</h4>
                  <p>多练习学得快学得好</p>
                </div>
              </div>
              <div class="question_menu_item" @click="questionMenuHandle(5,1)">
                <div class="menu_left">
                  <img src="/img/mobile/question_true.png" alt="" />
                </div>
                <div class="menu_right">
                  <h4>真题训练</h4>
                  <p>多练习学得快学得好</p>
                </div>
              </div>
              <div class="question_menu_item" @click="questionMenuHandle(6,1)">
                <div class="menu_left">
                  <img src="/img/mobile/question_info.png" alt="" />
                </div>
                <div class="menu_right">
                  <h4>考试资讯</h4>
                  <p>多练习学得快学得好</p>
                </div>
              </div>
            </div>
            <div class="question_detail_tips">*请选择任意测试题板块进行答题,如选择立即答题则默认从章节练习开始</div>
          </div>
          <div class="question_test" v-if="questionId && questionMenu">
            <div class="question_test_header">
              <Icon type="ios-arrow-back" style="margin:0 10px 0 14px;" @click="goBack()"/>
              <span @click="goBack()">返回</span>
            </div>
            <div class="question_menu_list">
              <div class="question_menu_item" @click="questionMenuHandle(1,2)">
                <div class="menu_left">
                  <img src="/img/mobile/question_chapter.png" alt="" />
                </div>
                <div class="menu_right">
                  <h4>章节练习</h4>
                  <p>多练习学得快学得好</p>
                </div>
                <img v-show="questionMenu == 1" class="selected" src="/img/pc/question_menu_selected.png" alt="">
              </div>
              <div class="question_menu_item" @click="questionMenuHandle(2,2)">
                <div class="menu_left">
                  <img src="/img/mobile/question_special.png" alt="" />
                </div>
                <div class="menu_right">
                  <h4>专项训练</h4>
                  <p>多练习学得快学得好</p>
                </div>
                <img v-show="questionMenu == 2" class="selected" src="/img/pc/question_menu_selected.png" alt="">
              </div>
              <div class="question_menu_item" @click="questionMenuHandle(3,2)">
                <div class="menu_left">
                  <img src="/img/mobile/question_simulation.png" alt="" />
                </div>
                <div class="menu_right">
                  <h4>模拟考试</h4>
                  <p>多练习学得快学得好</p>
                </div>
                <img v-show="questionMenu == 3" class="selected" src="/img/pc/question_menu_selected.png" alt="">
              </div>
              <div class="question_menu_item" @click="questionMenuHandle(4,2)">
                <div class="menu_left">
                  <img src="/img/mobile/question_wrong.png" alt="" />
                </div>
                <div class="menu_right">
                  <h4>我的错题</h4>
                  <p>多练习学得快学得好</p>
                </div>
                <img v-show="questionMenu == 4" class="selected" src="/img/pc/question_menu_selected.png" alt="">
              </div>
              <div class="question_menu_item" @click="questionMenuHandle(5,2)">
                <div class="menu_left">
                  <img src="/img/mobile/question_true.png" alt="" />
                </div>
                <div class="menu_right">
                  <h4>真题训练</h4>
                  <p>多练习学得快学得好</p>
                </div>
                <img v-show="questionMenu == 5" class="selected" src="/img/pc/question_menu_selected.png" alt="">
              </div>
              <div class="question_menu_item" @click="questionMenuHandle(6,2)">
                <div class="menu_left">
                  <img src="/img/mobile/question_info.png" alt="" />
                </div>
                <div class="menu_right">
                  <h4>考试资讯</h4>
                  <p>多练习学得快学得好</p>
                </div>
                <img v-show="questionMenu == 6" class="selected" src="/img/pc/question_menu_selected.png" alt="">
              </div>
            </div>
            <div class="question_type_menu_container">
              <menu-chapter :questionId="questionId" v-if="questionMenu == 1"></menu-chapter>
              <menu-special :questionId="questionId" v-if="questionMenu == 2"></menu-special>
              <menu-simulation :questionId="questionId" v-if="questionMenu == 3"></menu-simulation>
              <menu-wrong :questionId="questionId" v-if="questionMenu == 4"></menu-wrong>
              <menu-true :questionId="questionId" v-if="questionMenu == 5"></menu-true>
              <menu-info :questionId="questionId" v-if="questionMenu == 6"></menu-info>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Modal v-model="exportModal" :footer-hide="true" width="700">
      <div style="margin-top:26px;">
         <Steps :current="exportObj.current">
            <Step title="上传作业"></Step>
            <Step title="审核中"></Step>
            <Step title="审核结束"></Step>
        </Steps>
      </div>
      <div class="export-modal-box">
        <div class="box-one" v-if="exportObj.current === 0">
          <Icon type="ios-alert-outline" size="70" />
          <p>您尚未上传课程作业哟 !</p>
        </div>
        <div class="box-two" v-if="exportObj.current === 1">
          <Icon type="ios-book-outline" size="70" />
          <p>您的课程作业正在审核中，请耐心等待 !</p>
        </div>
        <div class="box-three" v-if="exportObj.current === 2">
          <template v-if="exportObj && exportObj.userReport.state == 3">
            <Icon type="ios-checkmark-circle" color="#19be6b" size="70"/>
            <p>恭喜您，您的课程作业已经通过了哟 !</p>
          </template>
          <template  v-if="exportObj && exportObj.userReport.state == 2">
            <Icon type="ios-close-circle" color="#ed4014" size="70" />
            <p>很遗憾，您的课程作业被驳回了哟，请下载下面附件查看哟 !</p>
            <div class="report-file">
              <div class="report-link"><Icon type="md-attach" />附件：{{exportObj.userReport.reportName + '-修改版' + '.' + exportObj.userReport.dataUrl.replace(/(.*\.)/, '')}}</div>
              <Button type="primary" icon="md-arrow-down" @click="downloadExport(exportObj.userReport.dataUrl,exportObj.userReport.reportName + '-修改版')">下载</Button>
            </div>
          </template>
        </div>
      </div>
    </Modal>
    <Modal v-model="taskModal" :footer-hide="true" width="700">
      <div style="margin-top:26px;">
         <Steps :current="taskObj.current">
            <Step :title="taskObj.taskType == 1 ? '开始考试' : '上传作业'"></Step>
            <Step title="审批中"></Step>
            <Step title="审批结束"></Step>
        </Steps>
      </div>
      <div class="export-modal-box">
        <div class="box-one" v-if="taskObj.current === 0">
          <template  v-if="taskObj && taskObj.taskType == 1">
            <Icon type="ios-alert-outline" size="70" />
            <p>您尚未开始考试哟 !</p>
          </template>
          <template v-if="taskObj && taskObj.taskType == 2">
            <Icon type="ios-alert-outline" size="70" />
            <p>您尚未上传课程作业哟 !</p>
          </template>
        </div>
        <div class="box-two" v-if="taskObj.current === 1">
          <Icon type="ios-book-outline" size="70" />
          <p>您的课程作业正在审批中，请耐心等待 !</p>
        </div>
        <div class="box-three" v-if="taskObj.current === 2">
          <template v-if="taskObj && taskObj.userTask.state == 1">
            <Icon type="ios-checkmark-circle" color="#19be6b" size="70"/>
            <p>恭喜您，得分{{taskObj.score}}，您的课程作业已经及格了哟 !</p>
          </template>
          <template  v-if="taskObj && taskObj.userTask.state == 2">
            <Icon type="ios-close-circle" color="#ed4014" size="70" />
            <p>很遗憾，得分{{taskObj.score}}，您的课程作业不及格，请继续努力哟 !</p>
            <!-- <div class="report-file">
              <div class="report-link"><Icon type="md-attach" />附件：{{exportObj.userTask.taskName + '-修改版' + '.' + exportObj.userTask.dataUrl.replace(/(.*\.)/, '')}}</div>
              <Button type="primary" icon="md-arrow-down" @click="downloadExport(exportObj.userTask.dataUrl,exportObj.userTask.taskName + '-修改版')">下载</Button>
            </div> -->
          </template>
        </div>
      </div>
    </Modal>
    <div class="preview-file-dialog" v-if="previewFileDialog">
        <!-- <pdf class="preview-pdf" v-if="previewFileType == 1" ref="pdf" :src="previewFileUrl"></pdf> -->
        
        <!-- <pdf class="preview-pdf" v-if="previewFileType == 1" ref="pdf" :src="previewFileUrl"  v-for="i in pdfPages"
                    :key="i"
                    :page="i"></pdf> -->
        <pdf
            class="preview-pdf" v-if="previewFileType == 1" ref="pdf"
          :src="previewFileUrl"
          :page="currentPage"
          @num-pages="pageCount=$event"
          @page-loaded="currentPage=$event"
          @loaded="loadPdfHandler">
        </pdf>
        <p class="preview-arrow" v-if="previewFileType == 1">
          <span @click="changePdfPage(0)" class="turn" :class="{grey: currentPage==1}">上一页</span>
          <span style="margin:0 20px;">{{currentPage}} / {{pageCount}}</span>
          <span @click="changePdfPage(1)" class="turn" :class="{grey: currentPage==pageCount}">下一页</span>
        </p>
        <img class="preview-img" v-if="previewFileType == 2" :src="previewFileUrl" alt="">
        <Icon type="md-close close-preview"  @click="previewFileDialog = false;"/>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
import { getMyOrderList } from "~/api/order";
import { getExamineReportList,getMyReport,getMyCertificate,downloadReport,saveUserReport } from "~/api/course";
import { getMemberInfo } from "~/api/member";
import { getMyTaskList, saveUserTask } from "~/api/task";
import { getMyQuestion,getMyQuestionGroupById,getMyTestRecord,getCollectList } from "~/api/v2-question-bank/question-bank";
import QuestionCard from "~/components/pc/QuestionCard";
import MenuChapter from "~/components/pc/question/MenuChapter.vue";
import MenuSpecial from "~/components/pc/question/MenuSpecial.vue";
import MenuSimulation from "~/components/pc/question/MenuSimulation.vue";
import MenuWrong from "~/components/pc/question/MenuWrong.vue";
import MenuTrue from "~/components/pc/question/MenuTrue.vue";
import MenuInfo from "~/components/pc/question/MenuInfo.vue";
export default {
  components: {
    QuestionCard,
    MenuChapter,
    MenuSpecial,
    MenuSimulation,
    MenuWrong,
    MenuTrue,
    MenuInfo,
  },
  data() {
    return {
      currentPage: 0, // pdf文件页码
      pageCount: 0, // pdf文件总页数
      pdfPages:0,//pdf页数
      vuePdf:null,//vue-pdf对象
      previewFileDialog:false,//预览窗口弹窗
      previewFileType:1,//1:pdf 2:文件
      // 预览文件地址
      previewFileUrl:null,
      //审核流程弹窗
      exportModal:false,
      // 审核流程
      exportObj:{
        current:0,
        userReport:null,
      },
      //我的作业审核流程弹窗
      taskModal:false,
      //我的作业分页
      taskPages: {
        page: 1,
        pageSize: 5,
        total:0
      },
      taskObj:{},
      //我的作业列表
      myTaskList:[],
      //成果报告分页
      reportPages: {
        page: 1,
        pageSize: 5,
        total:0
      },
      reportObj:{},
      //成果报告列表
      examineReportList:[],
      //我的课程分页
      course: {
        page: 1,
        pageSize: 5,
      },
      record_list: [], //我的考试列表,
      //我的考试分页
      test_record: {
        page: 1,
        pageSize: 5,
        total:0
      },
      collection_active:"course",
      underway_course_list: [], //正在进行中的课程
      underway_course_pages:{
        page: 1,
        pageSize: 5,
      },
      memberDiscount: {},
      questionBankActive:1,//我的题库导航
      open:'',
      certificateList:[],//证书材料
      //证书材料分页
      certificatePages: {
        page: 1,
        pageSize: 5,
        total:0
      },
      //我的题库分页
      myquestion: {
        page: 1,
        pageSize: 4,
        total:0
      },
      my_question_list:[],
      currentQuestionDetail:{},
      currentQuestionId:null,
      // 课程收藏
      course_collection:[],
      course_collection_pages:{
        page: 1,
        pageSize: 5,
        total:0
      },
      // 题库收藏
      question_collection:[],
      question_collection_pages:{
        page: 1,
        pageSize: 5,
        total:0
      },
    };
  },
  computed: {
    ...mapState({
      token(state) {
        return state.token;
      },
      user_info(state) {
        return state.user_info;
      },
      theme_color(state) {
        return state.theme_color;
      },
      major_list(state) {
        return state.major_list;
      },
      course_record_list(state) {
        return state.course_record_list;
      },
      myQuesionBankList(state) {
        return state.questionBank.question_record_list;
      },
      kl_md(state){
        return state.kl_md;
      }
    }),
    // 进行中的课程
    underway_course(){
      const { page, pageSize } = this.underway_course_pages;
      return this.underway_course_list.slice(
        (page - 1) * pageSize,
        page * pageSize
      );
    },
    //我的课程
    course_list() {
      const { page, pageSize } = this.course;
      return this.$store.state.course_record_list.slice(
        (page - 1) * pageSize,
        page * pageSize
      );
    },
    tap() {
      return this.$route.query.action || "mycourse";
    },
    // 传递过来的题库id
    questionId() {
      let questionId = this.$route.query.questionId;
      if (questionId && questionId != this.currentQuestionId) {
        this.currentQuestionId = questionId;
        this.getQuestionDetail(this.currentQuestionId);
      }
      return questionId;
    },
    // 传递过来的题库当前选择的板块
    questionMenu() {
      return this.$route.query.questionMenu;
    },
  },
  watch: {},
  filters:{
      formatState(val){
          switch (val) {
              case 1:
                  return "待审"
              case 2:
                  return "驳回"
              case 3:
                  return "通过"
              default:
                  break;
          }
      },
      formatTaskState(val){
          switch (val) {
              case 0:
                  return "待审"
              case 1:
                  return "及格"
              case 2:
                  return "不及格"
              default:
                  break;
          }
      }
  },
  methods: {
    ...mapMutations(["SET_IS_LOADING", "SET_COURSE_RECORD_LIST"]),
    ...mapActions(["initMyBuyCourseRecord"]),
    // 收藏分页
    collectionChangePage(n,type){
      if(type == 'course'){
        this.course_collection_pages.page = n;
        this.getCourseCollectionList();
      }else if(type == 'question'){
        this.question_collection_pages.page = n;
        this.getQuestionCollectionList();
      }
    },
    //获取课程收藏列表
    async getCourseCollectionList() {
      this.SET_IS_LOADING(true);
      let result = await getCollectList({
        sort: "id desc",
        offset:
        this.course_collection_pages.pageSize * (this.course_collection_pages.page - 1),
        limit: this.course_collection_pages.pageSize,
        userId: this.user_info.id,
        type: 1
      });
      if (result && result.data && result.data.code == 200) {
        this.course_collection = result.data.data.rows;
        this.course_collection_pages.total = result.data.data.total;
        this.SET_IS_LOADING(false);
      } else {
        this.SET_IS_LOADING(false);
        this.$Message.error("获取失败！");
      }
    },
    //获取题库收藏列表
    async getQuestionCollectionList() {
      this.SET_IS_LOADING(true);
      let result = await getCollectList({
        sort: "id desc",
        offset:
          this.question_collection_pages.pageSize * (this.question_collection_pages.page - 1),
        limit: this.question_collection_pages.pageSize,
        userId: this.user_info.id,
        type: 3
      });
      if (result && result.data && result.data.code == 200) {
        this.question_collection = result.data.data.rows;
        this.question_collection = this.question_collection.map(item => {
          return {
            targetId: item.targetId,
            question: JSON.parse(item.questionGroupTestQuestion.question),
            questionGroupId: item.questionGroupTestQuestion.questionGroupId,
            chapterId: item.questionGroupChapter.id,
            chapterName: item.questionGroupChapter.chapterName
          };
        });
        this.question_collection_pages.total = result.data.data.total;
        this.SET_IS_LOADING(false);
      } else {
        this.SET_IS_LOADING(false);
        this.$Message.error("获取失败！");
      }
    },
    // 题库考试记录分数统计页面跳转
    testRecordHandle(item){
      this.$router.push({
        path: "/fraction-count",
        query: {
          id: item.questionGroupId,
          type: "fraction",
          testRecordId: item.id,
          testType: item.paperType,
          testId: item.paperId
        }
      });
    },
    // 我的考试分页
    mytestChangePage(n){
     this.test_record.page = n;
      this.getExamRecord();
    },
    // 章节练习
    toQuestionTest(chapterId){
      if(chapterId){
        this.$router.push({
          path:
            "/question-test?id=" +
            this.questionId +
            "&type=0&chapterId=" +
            chapterId
        });
      }else{
        this.$Message.warning('当前没有章节可练习哟');
      }
    },
    // 已购买题库分页
    myquestionChangePage(n){
     this.myquestion.page = n;
     this.getMyBuyQuestion();
    },
    // 路由后退
    goBack(){
      this.$router.back();
    },
    // 题库6大板块跳转切换
    questionMenuHandle(questionMenu,type){
      if(type == 1){
        this.$router.push('/classroom?action=myquestion&questionId='+ this.questionId +'&questionMenu='+ questionMenu);
      }else{
        this.$router.replace('/classroom?action=myquestion&questionId='+ this.questionId +'&questionMenu='+ questionMenu)
      }
    },
    // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
    changePdfPage (val) {
      // console.log(val)
      if (val === 0 && this.currentPage > 1) {
        this.currentPage--
        // console.log(this.currentPage)
      }
      if (val === 1 && this.currentPage < this.pageCount) {
        this.currentPage++
        // console.log(this.currentPage)
      }
    },
    // pdf加载时
    loadPdfHandler (e) {
      this.currentPage = 1 // 加载的时候先加载第一页
    },
    // 证书预览
    async previewFile(url,certificateNo){
      if(/\.pdf/.test(url)){
        console.log("是pdf文件");
        this.previewFileType = 1;
        this.previewFileUrl = url;
        let CMAP_URL = "https://unpkg.com/pdfjs-dist@2.0.943/cmaps/"
        let loadingTask = this.vuePdf.default.createLoadingTask({
          url: url,
          cMapUrl: CMAP_URL,
          cMapPacked: true,
        });
        loadingTask.promise.then(pdf => {
          this.pdfPages = pdf.numPages;
          this.pageCount = pdf.numPages;
        }).catch(err => {
          console.error('pdf 加载失败', err);
        })
      }else{
        console.log("是图片");
        this.previewFileType = 2;
        this.previewFileUrl = url;
      }
      // this.previewFileUrl = url;
      this.previewFileDialog = true;
    },
    // 格式化日期
    trimDate(time, pattern) {
        if (arguments.length === 0 || !time) {
            return null
        }
        const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
        let date
        if (typeof time === 'object') {
            date = time
        } else {
            if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
                time = parseInt(time)
            } else if (typeof time === 'string') {
                time = time.replace(new RegExp(/-/gm), '/');
            }
            if ((typeof time === 'number') && (time.toString().length === 10)) {
                time = time * 1000
            }
            date = new Date(time)
        }
        const formatObj = {
            y: date.getFullYear(),
            m: date.getMonth() + 1,
            d: date.getDate(),
            h: date.getHours(),
            i: date.getMinutes(),
            s: date.getSeconds(),
            a: date.getDay()
        }
        const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
            let value = formatObj[key]
            // Note: getDay() returns 0 on Sunday
            if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
            if (result.length > 0 && value < 10) {
                value = '0' + value
            }
            return value || 0
        })
        return time_str
    },
    //审核流程处理
    examineReportHandle(obj){
      this.exportModal = true;
      if(obj.userReport && Object.keys(obj.userReport).length > 0){
        if(obj.userReport.state === 1){
          this.exportObj = {
            current:1,
            userReport:obj.userReport,
          }
        }else{
          this.exportObj = {
            current:2,
            userReport:obj.userReport,
          }
        }
      }else{
        this.exportObj = {
          current:0,
          userReport:null,
        }
      }
      
    },
    //我的作业审核流程处理
    examineTaskHandle(obj){
      this.taskModal = true;
      if(obj.userTask && Object.keys(obj.userTask).length > 0){
        
        if(obj.userTask.state === 0){
          this.taskObj = {
            current:1,
            taskType:obj.taskType,
            userTask:obj.userTask,
          }
        }else{
          if(obj.userTask.paperAnswer){
            this.taskObj = {
              current:2,
              userTask:obj.userTask,
              taskType:obj.taskType,
              score:JSON.parse(obj.userTask.paperAnswer).reduce((prev, next) => {
                  if(next.score){
                      return prev + next.score;
                  }else{
                      return prev;
                  }
              }, 0)
            }
          }else{
             this.taskObj = {
              current:2,
              userTask:obj.userTask,
              taskType:obj.taskType,
            }
          }
         
        }
      }else{
        this.taskObj = {
          current:0,
          userTask:null,
          taskType:obj.taskType,
        }
      }
      
    },
    //设置当前上传作业报告的数据
    setReport(obj){
      this.reportObj = obj;
    },
    //设置我的作业报告的数据
    setTask(obj,status,event){
      if(status){
        event.stopPropagation();
        return;
      }
      if(obj && obj.taskType == 2){
        this.taskObj = obj;
      }else{
        console.log("跳转");
        this.$router.push('/task-paper?taskId='+ obj.id)
      }
    },
    //作业报告下载
    async downloadExport(url,reportName){
        this.SET_IS_LOADING(true);

        let result = await downloadReport(url);
        const content = result.data;
        const blob = new Blob([content]);
        let fileName = reportName + '.' + url.replace(/(.*\.)/, '') // 自定义文件名+后缀;
        if ("download" in document.createElement("a")) {
            console.log("非IE下载");
        // 非IE下载
            const elink = document.createElement("a");
            elink.download = fileName;
            elink.style.display = "none";
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);
        } else {
            // IE10+下载
            console.log("IE10+下载");
            navigator.msSaveBlob(content, fileName);
        }
        this.SET_IS_LOADING(false);
    },
    //上传成果报告
    async handleUploadExport (file) {
        console.log(file);
        this.SET_IS_LOADING(true);
        let params = {
          file:file,
          userId:this.user_info.id,
          reportId:this.reportObj.id
        }
        let fd = new FormData();
        Object.keys(params).forEach(i => {
            if(params[i] || params[i] === 0){
                fd.append(i, params[i]);
            }
        });
        let result = await saveUserReport(fd);
        if (result && result.data && result.data.code == 200) {
            this.$Message.success("上传作业成功！");
            this.getMyReport();
            this.SET_IS_LOADING(false);
        } else {
          this.$Message.error("上传作业失败！");
          this.SET_IS_LOADING(false);
        }
        return false;
    },
    //获取我的成果报告
    async getMyReport(){
      this.SET_IS_LOADING(true);
      let params = {
          userId:this.user_info.id
      }
      let result = await getMyReport(params);
      if (result && result.data && result.data.code == 200) {
          this.examineReportList = result.data.data;
      }else{
        this.$Message.error(this.$t("locale.pc.classroom.t43"));
      }
      this.SET_IS_LOADING(false);
    },
    // 获取题库详情
    async getQuestionDetail(questionId){
      this.SET_IS_LOADING(true);
      // console.log("获取题库详情",questionId);
      let params = {
        questionGroupId:questionId,
      }
      let result = await getMyQuestionGroupById(params);
      if (result && result.data && result.data.code == 200) {
          const { data } = result.data;
          this.currentQuestionDetail = {
            ...data,
            rate_learning: data.totalNum == 0 || data.doneNum == 0 ? 0 : parseInt((data.doneNum / data.totalNum) * 100),
            deleted:new Date().getTime() > data.endTime ? 1 : 0
          };
      }else{
        this.$Message.error(this.$t("locale.pc.classroom.t43"));
      }
      this.SET_IS_LOADING(false);
    },
    // 获取新版题库我的考试记录
    async getExamRecord() {
      this.SET_IS_LOADING(true);
      let params = {
        userId: this.user_info.id,
        offset: this.test_record.pageSize * (this.test_record.page - 1),
        limit: this.test_record.pageSize,
        sort: 'id desc',
      };
      let result = await getMyTestRecord(params);
      console.log("获取考试记录：", result);
      if (result && result.data && result.data.code == 200) {
        this.record_list = result.data.data.rows;
        this.test_record.total = result.data.data.total;
      }
      this.SET_IS_LOADING(false);
    },
    // 获取我的题库
    async getMyBuyQuestion(){
      this.SET_IS_LOADING(true);
      let params = {
        offset: this.myquestion.pageSize * (this.myquestion.page - 1),
        limit: this.myquestion.pageSize,
        sort: 'id desc',
      }
      let result = await getMyQuestion(params);
      if (result && result.data && result.data.code == 200) {
          this.my_question_list = result.data.data.rows.map(item=>{
            return {
              ...item,
              rate_learning: item.totalNum == 0 || item.doneNum == 0 ? 0 : parseInt((item.doneNum / item.totalNum) * 100),
              deleted:new Date().getTime() > item.endTime ? 1 : 0
            }
          });
          this.myquestion.total = result.data.data.total;
      }else{
        this.$Message.error(this.$t("locale.pc.classroom.t43"));
      }
      this.SET_IS_LOADING(false);
    },
    //获取我的证书
    async getMyCertificate(){
      this.SET_IS_LOADING(true);
      let result = await getMyCertificate(this.user_info.id);
      if (result && result.data && result.data.code == 200) {
          this.certificateList = result.data.data;
      }else{
        this.$Message.error(this.$t("locale.pc.classroom.t43"));
      }
      this.SET_IS_LOADING(false);
    },
    //上传我的作业
    async handleUploadTask (file) {
        console.log(file);
        this.SET_IS_LOADING(true);
        let params = {
          file:file,
          userId:this.user_info.id,
          taskId:this.taskObj.id
        }
        let fd = new FormData();
        Object.keys(params).forEach(i => {
            if(params[i] || params[i] === 0){
                fd.append(i, params[i]);
            }
        });
        let result = await saveUserTask(fd);
        if (result && result.data && result.data.code == 200) {
            this.$Message.success("上传作业成功！");
            this.getMyTask();
            this.SET_IS_LOADING(false);
        }else if(result && result.data && result.data.code == 1001){
          this.$Message.warning(result.data.msg);
          this.SET_IS_LOADING(false);
        }else {
          this.$Message.error("上传作业失败！");
          this.SET_IS_LOADING(false);
        }
        return false;
    },
    //获取我的作业
    async getMyTask(){
      this.SET_IS_LOADING(true);
      let params = {
          offset: this.taskPages.pageSize * (this.taskPages.page - 1),
          limit: this.taskPages.pageSize,
          sort: 'id desc',
      }
      let result = await getMyTaskList(params);
      if (result && result.data && result.data.code == 200) {
          this.myTaskList = result.data.data.rows;
          this.taskPages.total = result.data.data.total;
      }else{
        this.$Message.error(this.$t("locale.pc.classroom.t43"));
      }
      this.SET_IS_LOADING(false);
    },
    // 我的作业分页
    handleTaskChangePage(n){
      console.log(n);
      this.taskPages.page = n;
    },
    async getExamineReportList(){
      let params = {
          offset: this.reportPages.pageSize * (this.reportPages.page - 1),
          limit: this.reportPages.pageSize,
          sort: 'id desc',
          userId:this.user_info.id
      }
      let result = await getExamineReportList(params);
      if (result && result.data && result.data.code == 200) {
          this.examineReportList = result.data.data.rows;
          this.reportPages.total = result.data.data.total;
      }else{
        this.$Message.error(this.$t("locale.pc.classroom.t43"));
      }
    },
    // 获取用户会员信息
    async getMemberInfo() {
      this.SET_IS_LOADING(true);
      let result = await getMemberInfo(this.user_info.id);
      if (result && result.data && result.data.code == 200) {
        this.memberDiscount = result.data.data;
      } else {
        this.$Message.error(this.$t("locale.pc.classroom.t43"));
      }
      this.SET_IS_LOADING(false);
    },
    // 判断课程是否是会员免费
    isMemberFree(majorId, courseId) {
      console.log(majorId, courseId);
      if (this.memberDiscount && JSON.stringify(this.memberDiscount) !== "{}") {
        if (
          this.memberDiscount.majorIds.includes(majorId) ||
          this.memberDiscount.courseIds.includes(courseId)
        ) {
          return true;
        } else {
          return false;
        }
      } else {
        return false;
      }
    },
    // 格式化时间
    trimDate(date) {
      if (date) {
        let _date = new Date(date);
        var year = _date.getFullYear();
        var month = _date.getMonth() + 1;
        var date = _date.getDate();
        var hours = _date.getHours();
        var minutes = _date.getMinutes();
        if (month < 10) {
          month = "0" + month;
        }
        if (date < 10) {
          date = "0" + date;
        }
        if (hours < 10) {
          hours = "0" + hours;
        }
        if (minutes < 10) {
          minutes = "0" + minutes;
        }
        return year + "." + month + "." + date + " " + hours + ":" + minutes;
        // return `${_date.getFullYear()}.${_date.getMonth() +
        //   1}.${_date.getDate()} ${_date.getHours()}:${'0'+_date.getMinutes()}`;
      } else {
        return this.$t("locale.pc.classroom.unknow");
      }
    },
    // 左侧导航切换
    handleSelect(key) {
      this.$router.push({
        path: "",
        query: {
          action: key,
        },
      });
    },
    // 跳转页面
    toPath(path) {
      this.$router.push(path);
    },
    // 分页
    handleChangePage(n, type) {
      this[type].page = n;
    },
    // 获取已购买的课程
    async getMyCoursesMine() {
      this.SET_IS_LOADING(true);
      let params = {
        userId: this.user_info.id,
      };
      let result = await getMyOrderList(params);
      console.log("result:", result);
      if (result && result.data && result.data.code == 200) {
        this.underway_course_list = result.data.data.rows.filter(
          (item) => item.buyCourseDeadlineDate >= new Date().getTime()
        );
        this.SET_COURSE_RECORD_LIST(result.data.data.rows);
      } else {
        this.$Message.error(this.$t("locale.pc.classroom.t43"));
        this.SET_IS_LOADING(true);
      }
    },
  },
  created() {
    if (process.client) {
      this.vuePdf = require('vue-pdf')
      document.body.scrollTop = document.documentElement.scrollTop = 0;
    }
    if (!this.token || (Object.keys(this.user_info).length == 0)) {
      this.$router.push("/login");
      return;
    }
    this.initMyBuyCourseRecord();
    this.getMyCoursesMine();
    this.getMyBuyQuestion();
    this.getExamRecord();
    this.getCourseCollectionList();
    this.getQuestionCollectionList();
    this.getMemberInfo();
    this.getMyReport();
    this.getMyTask();
    this.getMyCertificate();
  },
  mounted() {
  },
};
</script>

<style lang="scss">
.ivu-steps {
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    font-size: 0;
    line-height: 1.5;
    .ivu-steps-item {
      display: inline-block;
      position: relative;
      vertical-align: top;
      -ms-flex: 1;
      flex: 1;
      overflow: hidden;
      
      &:last-child {
          -ms-flex: 0;
          flex: none;
          width: initial !important;
      }
  }
}
.export-modal-box{
  width: 100%;
  .box-one,.box-two,.box-three{
    padding: 50px 0;
    text-align: center;
    font-size: 16px;
    p{
      line-height: 50px;
    }
    .report-file{
      display: flex;
      justify-content: space-between;
      width: 100%;
      padding: 8px;
      background-color: #f5f7fa;
      .report-link{
        line-height: 32px;
        color: var(--theme-color);
        font-size: 13px;
      }
    }
  }
}
.preview-file-dialog{
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        height: 100%;
        background: #fff;
        z-index: 10000000000000000;
        overflow: auto;
        .preview-btn{
          font-size: 16px;
          cursor: pointer;
          color: var(--theme-color);
        }
        .close-preview{
            position: fixed;
            right: 20px;
            top: 20px;
            font-size: 30px;
            cursor: pointer;
        }
        .preview-img{
            position: absolute;
            left: 0;
            // top: 0;
            right: 0;
            // bottom: 0;
            padding: 20px 0;
            max-width: 800px;
            margin: auto;
        }
        .preview-pdf{
            width: 800px;
            margin: 0 auto;
        }
        .preview-arrow{
          padding: 20px 0;
          text-align: center;
          font-size: 16px;
          .turn{
            cursor: pointer;
          }
        }
}
.page-classroom {
  min-height: calc(100vh - 427px);
  .empty_data{
    padding: 50px 30px;
    font-size: 16px;
    background: #ffffff;
    text-align: center;
    p{
      text-align: center;
      line-height: 30px;
    }
  }
  .page-user-container {
    margin: 0 auto;
    padding: 30px 0;
    width: 1200px;
    &::after{
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .classroom-left {
      width: 240px;
      min-height: 370px;
      float: left;
      font-size: 18px;
      font-weight: bold;
      border-radius: 2px;
      background: #fff;
      .left-title {
        width: 100%;
        height: 66px;
        line-height: 66px;
        text-align: center;
        color: var(--theme-color);

        border-bottom: 1px solid #e9edf5;
        height: 69px;
        line-height: 69px;
      }
      .left-item {
        cursor: pointer;
        width: 100%;
        height: 66px;
        line-height: 66px;
        text-align: center;
      }
      .left-item.active {
        color: #ffffff;
        background: var(--theme-color);
      }
    }
    .classroom-right {
      width: 934px;
      float: right;
      .ongoing,
      .mycourse {
        box-sizing: border-box;
        padding-left: 24px;
        .title {
          font-size: 20px;
          font-weight: bold;
          color: #5a5e66;
        }
        .online {
          margin: 10px 0;
          width: 100%;
          height: 1px;
          background-color: #e9edf5;
        }
        .course-box {
          border-radius: 2px;
          box-shadow: 0px 0px 3px #888888;
          width: 100%;
          height: 250px;
          background-color: #ffffff;
          border-radius: 2px;
          padding: 35px 40px;
          box-sizing: border-box;
          margin-bottom: 20px;
          display: flex;
          position: relative;
          .tabs-list {
            position: absolute;
            top: 0;
            right: 0;
          }
          .box-left {
            width: 270px;
            height: 180px;
            img {
              width: 100%;
              height: 100%;
              display: block;
            }
          }
          .box-right {
            padding: 5px 10px 5px 20px;
            box-sizing: border-box;
            width: 560px;
            position: relative;
            .course-name {
              font-size: 16px;
              font-weight: bold;
              line-height: 22px;
              color: #5a5e66;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              overflow: hidden;
              text-overflow: ellipsis;
              -webkit-box-orient: vertical;
              height: 44px;
              margin-bottom: 10px;
            }
            .course-teacher {
              font-size: 14px;
              font-weight: bold;
              line-height: 36px;
              color: #9da5b2;
            }
            .course-time {
              font-size: 14px;
              font-weight: bold;
              line-height: 36px;
              color: #bcc2cc;
            }
            .course-progress {
              margin-top: 24px;
              width: 460px;
            }
            .course-tips {
              position: absolute;
              right: 0px;
              top: 0px;
              font-size: 14px;
              font-weight: bold;
              line-height: 22px;
              .study {
                color: #ff8a8a;
              }
              .live {
                position: relative;
                color: var(--theme-color);
                &::before {
                  content: "";
                  position: absolute;
                  width: 30px;
                  height: 30px;
                  left: -30px;
                  top: -3px;
                  background-size: 100% 100%;
                  background-repeat: no-repeat;
                  z-index: 99;
                  background-image: url("/img/pc/live.png");
                  background-color: var(--theme-color);
                }
              }
            }
            .submit {
              position: absolute;
              right: 0px;
              bottom: 10px;
              .start-study {
                cursor: pointer;
                width: 84px;
                height: 32px;
                line-height: 32px;
                text-align: center;
                background-color:var(--theme-color);
                border-radius: 4px;
                font-size: 14px;
                font-weight: bold;
                color: #ffffff;
              }
            }
          }
        }
      }
      .mycourse_module,.ongoing_module{
        width: 100%;
        min-height: 100%;
        .mycourse_header{
          padding-left: 47px;
          box-sizing: border-box;
          background: #ffffff;
          .header_title{
            border-bottom: 1px solid #e9edf5;
            font-size: 20px;
            font-weight: bold;
            color: #5a5e66;
            line-height: 74px;
          }
        }
        .mycourse_list{
          .mycourse_item{
            background-color: #ffffff;
            padding-left: 47px;
            padding-right: 40px;
            border-radius: 2px;
            width: 100%;
            height: 162px;
            box-sizing: border-box;
            margin-bottom: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            .tabs_list {
              position: absolute;
              top: 0;
              right: 0;
            }
            .mycourse_item_left{
              width: 150px;
              height: 100px;
              img{
                display: block;
                width: 100%;
                height: 100%;
              }
            }
            .mycourse_item_center{
              width: 550px;
              height: 100px;
              .mycourse_name{
                font-size: 16px;
                display: -webkit-box;
                -webkit-line-clamp:1;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-box-orient: vertical;
                margin-bottom: 6px;
              }
              .mycourse_info{
                line-height: 30px;
                font-size: 14px;
              }
              .mycourse_progress{
                // width: 550px;
                width: 100%;
              }
            }
            .mycourse_item_right{
              width: 100px;
              height: 100px;
              display: flex;
              align-items: center;
              justify-content: space-evenly;
              flex-direction: column;
              .mycourse_btn{
                width: 90px;
                height: 32px;
                line-height: 32px;
                text-align: center;
                background-color: var(--theme-color);
                border-radius: 4px;
                font-size: 14px;
                color: #ffffff;
                cursor: pointer;
              }
            }
          }
        }
      }
      .myachievements{
        width: 100%;
        min-height: 100%;
        background: #ffffff;
        padding: 0 30px;
        padding-top: 10px;
        .report-empty-box{
          padding: 50px 0;
          text-align: center;
          font-size: 16px;
          p{
            line-height: 50px;
          }
        }
        .report-box{
          width: 100%;
          height: 170px;
          padding-bottom: 10px;
          border-bottom: 1px solid #e6e6e6;
          &:last-child{
            border-bottom: none;
          }
          .report-top{
            display: flex;
            justify-content: space-between;
            position: relative;
            .tips{
                position: absolute;
                right: 10px;
                top: 50px;
                line-height: 25px;
                font-size: 14px;
                .bg-color{
                    display: inline-block;
                    width: 10px;
                    height: 10px;
                    border-radius: 50%;
                    margin-right: 5px;
                }
            }
            .report-top-left{
              display: flex;
              align-items: center;
              height: 105px;
              .course-img{
                width: 135px;
                height: 90px;
                display: block;
                background: var(--theme-color);
              }
              .course-name{
                height: 90px;
                margin-left: 10px;
                font-size: 16px;
              }
            }
            .report-top-right{
              padding: 10px 8px;
              display: flex;
              .record{
                font-size: 14px;
                margin-right: 16px;
                color: var(--theme-color);
                cursor: pointer;
                line-height: 32px;
              }
            }
          }
          .report-bottom{
            display: flex;
            justify-content: space-between;
            width: 100%;
            padding: 8px;
            background-color: #f5f7fa;
            .report-link{
              line-height: 32px;
              color: var(--theme-color);
              font-size: 13px;
            }
          }
        }
      }
      .mytask_module{
        width: 100%;
        min-height: 100%;
        .task_header{
          padding-left: 47px;
          box-sizing: border-box;
          background: #ffffff;
          .header_title{
            border-bottom: 1px solid #e9edf5;
            font-size: 20px;
            font-weight: bold;
            color: #5a5e66;
            line-height: 74px;
          }
        }
        .task_module_box{
          width: 100%;
          height: 162px;
          background-color: #ffffff;
          border-radius: 2px;
          padding-left: 47px;
          padding-right: 40px;
          box-sizing: border-box;
          margin-bottom: 10px;
          .task_box_content{
            padding-top:40px;
            box-sizing: border-box;
            .task_name{
              font-size: 16px;
              letter-spacing: 2px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              margin-bottom: 15px;
            }
            .task_time{
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              font-size: 14px;
              color: #bcc2cc;
              margin-bottom: 10px;
            }
            .task_btn_list{
              display: flex;
              justify-content: flex-end;
              .task_btn_item{
                width: 86px;
                height: 28px;
                background-color: var(--theme-color);
                border-radius: 4px;
                font-size: 14px;
	              color: #ffffff;
                text-align: center;
                line-height: 28px;
                margin-left: 24px;
                cursor: pointer;
                &.task_btn_gray{
                  background-color: #d6d6d6;
                }
                &.task_btn_pink{
                  background-color: #ff8a8a;
                }
              }
            }
            .examine_tips{
              margin-top: 8px;
              text-align: right;
              font-size: 14px;
              color: var(--theme-color);
            }
          }
        }
      }
      .mytest_module{
        width: 100%;
        min-height: 100%;
        .test_header{
          padding-left: 47px;
          box-sizing: border-box;
          background: #ffffff;
          .header_title{
            border-bottom: 1px solid #e9edf5;
            font-size: 20px;
            font-weight: bold;
            color: #5a5e66;
            line-height: 74px;
          }
        }
        .test_box{
          background-color: #ffffff;
          padding-left: 47px;
          padding-right: 40px;
          border-radius: 2px;
          width: 100%;
          height: 162px;
          box-sizing: border-box;
          margin-bottom: 10px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          position: relative;
          cursor: pointer;
          .test_box_left{
            width: 90px;
            height: 90px;
            border-radius: 50%;
            background: var(--theme-color);
            color: #ffffff;
            font-size: 16px;
            text-align: center;
            line-height: 90px;
          }
          .test_box_right{
            width: 730px;
            .test_name{
              font-size: 20px;
              font-weight: bold;
              line-height: 40px;
            }
            .test_time{
              font-size: 16px;
              line-height: 40px;
              span{
                margin-right: 30px;
              }
            }
          }
          .test_tips_result{
            position: absolute;
            right: 0;
            top: 20px;
            background: var(--theme-color);
            color: #ffffff;
            padding: 10px 10px 10px 20px;
            border-top-left-radius: 18px;
            border-bottom-left-radius: 18px;
            font-size: 14px;
          }
        }
      }
      .mycollection_module{
        .collection_header{
            width: 934px;
            height: 74px;
            background-color: #ffffff;
            box-sizing: border-box;
            padding-left: 47px;
            .collection_nav{
              border-bottom: 1px solid #e9edf5;
              height: 74px;
              display: flex;
              color: #878d99;
              .collection_nav_item{
                font-size: 20px;
                font-weight: bold;
                padding: 0 20px;
                cursor: pointer;
                line-height: 74px;
                position: relative;
                margin-right: 10px;
                &.selectd{
                  color: #5a5e66;
                  &::after{
                    width: 100%;
                    height: 3px;
                    background: var(--theme-color);
                    content: "";
                    display: block;
                    position: absolute;
                    left: 0;
                    bottom: 0;
                  }
                }
              }
            }
        }
        .course_collection_list{
          .course_collection_item{
            background-color: #ffffff;
            padding-left: 47px;
            padding-right: 40px;
            border-radius: 2px;
            width: 100%;
            height: 162px;
            box-sizing: border-box;
            margin-bottom: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            .course_item_left{
              width: 150px;
              height: 100px;
              img{
                display: block;
                width: 100%;
                height: 100%;
              }
            }
            .course_item_center{
              width: 540px;
              height: 100px;
              .course_name{
                font-size: 16px;
                line-height: 30px;
                height: 60px;
                display: -webkit-box;
                -webkit-line-clamp:2;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-box-orient: vertical;
                margin-bottom: 6px;
              }
              .course_time{
                line-height: 30px;
                font-size: 14px;
              }
            }
            .course_item_right{
              width: 100px;
              height: 100px;
              display: flex;
              align-items: center;
              justify-content: center;
              .collection_btn{
                width: 90px;
                height: 32px;
                line-height: 32px;
                text-align: center;
                background-color: var(--theme-color);
                border-radius: 4px;
                font-size: 14px;
                color: #ffffff;
                cursor: pointer;
              }
            }
          }
        }
        .question_collection_list{
          .question_collection_item{
            background-color: #ffffff;
            padding-left: 47px;
            padding-right: 40px;
            border-radius: 2px;
            width: 100%;
            height: 162px;
            box-sizing: border-box;
            margin-bottom: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            .question_item_left{
              width: 150px;
              height: 100px;
              img{
                display: block;
                width: 100%;
                height: 100%;
              }
            }
            .question_item_center{
              width: 540px;
              height: 100px;
              .question_name{
                font-size: 16px;
                line-height: 30px;
                height: 60px;
                display: -webkit-box;
                -webkit-line-clamp:2;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-box-orient: vertical;
                margin-bottom: 6px;
              }
              .question_chapter{
                line-height: 30px;
                font-size: 14px;
              }
            }
            .question_item_right{
              width: 100px;
              height: 100px;
              display: flex;
              align-items: center;
              justify-content: center;
              .collection_btn{
                width: 90px;
                height: 32px;
                line-height: 32px;
                text-align: center;
                background-color: var(--theme-color);
                border-radius: 4px;
                font-size: 14px;
                color: #ffffff;
                cursor: pointer;
              }
            }
          }
        }
      }
      .mycertificate{
        width: 100%;
        min-height: 100%;
        background: #ffffff;
        padding: 0 30px;
        // padding-top: 10px;
        .certificate-box{
          width: 100%;
          // height: 170px;
          padding-bottom: 26px;
          padding-top: 26px;
          border-bottom: 1px solid #e6e6e6;
          font-size: 16px;
          display: flex;
          justify-content: space-between;
          text-align: center;
          .certificate-box-item{
            text-align: left;
            &:last-child {
              text-align: right;
            }
          }
          .certificate-btn{
            cursor: pointer;
            &:hover{
              color: var(--theme-color);
            }
          }
          &:last-child{
            border-bottom: none;
          }
        }
        .certificate-empty-box{
          padding: 50px 0;
          text-align: center;
          font-size: 16px;
          p{
            line-height: 50px;
          }
        }
      }
      .myquestion{
        width: 934px;
        .question_container{
          .question_header{
            width: 934px;
            height: 74px;
            background-color: #ffffff;
            box-sizing: border-box;
            padding-left: 47px;
            .question_nav{
              border-bottom: 1px solid #e9edf5;
              height: 74px;
              display: flex;
              color: #878d99;
              .question_nav_item{
                font-size: 20px;
                font-weight: bold;
                padding: 0 20px;
                cursor: pointer;
                line-height: 74px;
                position: relative;
                margin-right: 10px;
                &.selectd{
                  color: #5a5e66;
                  &::after{
                    width: 100%;
                    height: 3px;
                    background: var(--theme-color);
                    content: "";
                    display: block;
                    position: absolute;
                    left: 0;
                    bottom: 0;
                  }
                }
              }
            }
          }
          .question_list{
            width: 934px;
            .question_item{
              margin-bottom: 22px;
            }
          }
        }
        .question_detail{
          .question_header{
            width: 934px;
            height: 74px;
            background-color: #ffffff;
            box-sizing: border-box;
            padding-left: 47px;
            .question_nav{
              border-bottom: 1px solid #e9edf5;
              height: 74px;
              display: flex;
              color: #878d99;
              .question_nav_item{
                font-size: 20px;
                font-weight: bold;
                // padding: 0 10px;
                cursor: pointer;
                line-height: 74px;
                position: relative;
                // margin-right: 10px;
                &.selectd{
                  color: #5a5e66;
                }
              }
            }
          }
          .question_info_box{
            width: 934px;
            height: 206px;
            box-sizing: border-box;
            padding-left: 47px;
            padding-top: 30px;
            padding-bottom: 30px;
            background-color: #ffffff;
            .question_info_name{
              font-size: 18px;
              font-weight: bold;
              line-height: 30px;
              letter-spacing: 2px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              color: #43474c;
            }
            .question_info_date{
              font-size: 14px;
              color: #aaadb3;
              margin-top: 5px;
              margin-bottom: 30px;
            }
            .question_info_progress{
              display: flex;
              justify-content: space-between;
              .info_progress_left{
                font-size: 14px;
                color: #8d9199;
                
                .progress {
                  margin-bottom: 14px;
                  display: flex;
                }
                .correct {
                  display: flex;
                }
              }
              .info_progress_right{
                width: 140px;
                display: flex;
                align-items: center;
                .to_test_btn{
                  display: inline-block;
                  box-sizing: content-box;
                  height: 32px;
                  padding: 0 14px;
                  background-color: var(--theme-color);
                  border-radius: 4px;
                  font-size: 14px;
                  font-weight: bold;
                  color: #ffffff;
                  line-height: 32px;
                  text-align: center;
                  color: #ffffff;
                  cursor: pointer;
                }
              }
            }
          }
          .question_menu_list{
            display: flex;
            flex-wrap: wrap;
            margin-top: 23px;
            .question_menu_item{
              width: 214px;
              height: 101px;
              background-color: #ffffff;
              border-radius: 2px;
              margin: 0 26px 20px 0;
              // margin: 0 18px 13px 0;
              box-sizing: border-box;
              padding: 22px 18px;
              display: flex;
              justify-content: space-between;
              cursor: pointer;
              &:nth-child(4n) {
                margin: 0 0 13px 0;
              }
              .menu_left{
                width: 53px;
                height: 53px;
                img {
                  width: 100%;
                  height: 100%;
                  display: block;
                }
              }
              .menu_right{
                width: 114px;
                height: 53px;
                h4 {
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  font-size: 16px;
                  // font-weight: bold;
                  line-height: 28px;
                  color: #4a4b4d;
                  // margin-top: 10px;
                }
                p {
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  font-size: 12px;
                  // font-weight: bold;
                  line-height: 25px;
                  color: #b1b1b3;
                }
              }
            }
          }
          .question_detail_tips{
            font-size: 14px;
            font-weight: bold;
            line-height: 30px;
            letter-spacing: 1px;
            color: var(--theme-color);
            margin-top: 16px;
          }
        }
        .question_test{
          .question_test_header{
            width: 934px;
            height: 69px;
            // line-height: 69px;
            background-color: #ffffff;
            font-size: 20px;
            color: #878d99;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            &:hover{
              color: var(--theme-color);
              cursor: pointer;
            }
          }
          .question_menu_list{
            display: flex;
            flex-wrap: wrap;
            margin-top: 23px;
            .question_menu_item{
              width: 214px;
              height: 101px;
              background-color: #ffffff;
              border-radius: 2px;
              margin: 0 26px 20px 0;
              // margin: 0 18px 13px 0;
              box-sizing: border-box;
              padding: 22px 18px;
              display: flex;
              justify-content: space-between;
              cursor: pointer;
              position: relative;
              .selected{
                position: absolute;
                width: 26px;
                height: 26px;
                border-radius: 50%;
                overflow: hidden;
                right: -6px;
                top: -6px;
                background: var(--theme-color);
              }
              &:nth-child(4n) {
                margin: 0 0 13px 0;
              }
              .menu_left{
                width: 53px;
                height: 53px;
                img {
                  width: 100%;
                  height: 100%;
                  display: block;
                }
              }
              .menu_right{
                width: 114px;
                height: 53px;
                h4 {
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  font-size: 16px;
                  // font-weight: bold;
                  line-height: 28px;
                  color: #4a4b4d;
                  // margin-top: 10px;
                }
                p {
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  font-size: 12px;
                  // font-weight: bold;
                  line-height: 25px;
                  color: #b1b1b3;
                }
              }
            }
          }
        }
      }
    }
  }
  .no-data {
    text-align: center;
    margin-top: 50px;
    > i {
      font-size: 80px;
      color: var(--theme-color);
    }
    .none-text {
      margin: 15px 0;
      font-size: 16px;
      color: #666;
      text-align: center;
    }
  }
}
</style>
